<template>
	<view style="padding-bottom: 110rpx;">
		<u-sticky>
			<view class="searchBox">
				<view style="display: flex;"><text class="city">车辆搜索</text></view>

				<view class="search">
					<u--input :value="carNo" clearable border="none" fontSize="12" placeholder="输入车牌号查询"
						@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" />
				</view>
			</view>
			<view class="searchBox flex-row-center-sb" style="border: none;">
				<view class="flex-row-center">
					<text class="city" style="margin-right:10rpx;">预定车型</text>
					<u-switch v-model="allModel" activeColor="#5ac725" @change="searchChange2"></u-switch>
					<text class="city" style="margin-left:10rpx;">全部车型</text>
				</view>
				<view class="text-line" style="position: relative;top: 10rpx;" v-if="order.carNo">
					<text style="color: #666;margin-right: 10rpx;">当前排车:</text>
					<text>{{ order.carNo }}</text>
				</view>
			</view>
		</u-sticky>

		<!-- <view style="padding-bottom: 120rpx;"> -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<!-- <u-radio-group v-model="checkedCarId"> -->
			<view class="item" v-for="(item, index) in carList" :key="item.carId">
				<view @click="checkedCar(item.carId)">
					<view class="text-line">
						<text class="text-name">车型信息:</text>
						<text class="text-value">{{ item.carInfo | filterNull }}</text>
					</view>
					<view class="text-line">
						<text class="text-name">车牌号:</text>
						<text class="text-value">{{ item.carNo | filterNull }}</text>
					</view>
					<view class="flex-row-center" style="padding: 0 18rpx 10rpx;">
						<text class="text-name">车辆状态:</text>
						<view class="flex-colum">
							<view class="flex-row">
								<text class="text-value"
									:class="{ tuijian: item.status == 1 }">{{ item.status | carOrderStatus }}</text>

								<text class="text-value" style="color: #1573ff;" v-if="item.orderNo"
									@click="goOrderDetail(item.orderNo)">({{ item.orderNo }})</text>
								<text class="text-value"
									v-if="item.status == 5 || item.status == 6 || item.status == 7">
									({{ item.startTime }}至{{ item.endTime||'--' }})
								</text>
							</view>
							<!-- <text class="text-value" v-if="item.orderNo">
								订单时间:{{ item.startTime }}至{{ item.endTime }}
							</text>
							<text class="text-value" v-if="item.status == 3">若分配此车辆,则预排订单重新排车</text>
							<text class="text-value" v-if="item.status == 4">若强制配车,则上述订单重新排车</text>
							<text class="text-value" v-if="item.status == 8">车辆已被其他订单占用,请选择其他车辆</text> -->
							<!-- <text class="text-value" v-if="item.intervalTimeStr">间隔时间:{{ item.intervalTimeStr }}</text> -->
						</view>
					</view>
					<!-- 	<view class="text-line">
								<text class="text-name" >车辆状态:</text>
								<text class="text-value" :class="{'tuijian':item.status==1}">{{item.status|carOrderStatus}}</text>
								
								<text class="text-value">预排推荐车辆</text>
							</view> -->
					<view class="text-line">
						<text class="text-name">归属门店:</text>
						<text class="text-value">{{ item.belongingStore | filterNull }}</text>
					</view>
					<view class="text-line">
						<text class="text-name">停靠门店:</text>
						<text class="text-value">{{ item.locatedStore | filterNull }}</text>
					</view>

					<view v-if="item.status > 0 && item.status < 5" style="display: flex;justify-content: flex-end;">
						<text v-if="item.status == 4" class="btn-detail" @click="distribution(item)">强制排车</text>
						<text v-else class="btn-detail" @click="distribution(item)">确定排车</text>
					</view>
				</view>
			</view>
			<!-- </u-radio-group> -->
		</mescroll-body>
		<!-- </view> -->
		<view class="bottomBtn">
			<button type="info" class="btn" @click="addPeerCar">添加同行车辆</button>
			<!-- <button type="info" class="btn" @click="distribution">确定分配</button> -->
		</view>

		<u-modal :show="show" title="设置托管单价" showCancelButton @confirm="confimDispatchCar" @close="show=false" @cancel="show=false">
			<view class="flex-row-center">
				<text>托管单价</text>
				<u--input v-model="escrowUnitPrice" @input="check" type="digit" placeholder="请输入单价"></u--input>
				<text>元/天</text>
			</view>
		</u-modal>


	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import * as api from '@/api/order-api.js';
	import orderInfo from './component/orderInfo.vue';
	export default {
		components: {
			orderInfo
		},
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				order: {},
				carNo: '',
				isSearch: false,
				carList: [],
				checkedCarId: null,
				allModel: false,
				show: false,
				escrowUnitPrice: null, //托管单价
				carId: '', //车辆id
			};
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
		},

		computed: {
			offsetTop() {
				return uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750) * uni.getSystemInfoSync().windowWidth - 0.5;
			}
		},
		methods: {
			upCallback(page) {
				var param = {
					isOta: this.order.isOta || false,
					orderNo: this.order.orderNo,
					carNo: this.carNo,
					pageNum: page.num,
					pageSize: page.size,
					allModel: this.allModel
				};
				api.geCarList(this.toParams(param))
					.then(res => {
						//设置列表数据
						if (page.num == 1) this.carList = []; //如果是第一页需手动制空列表
						this.carList = this.carList.concat(res.rows); //追加新数据
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
				this.mescroll.endSuccess();
			},
			//搜索
			searchChange(value) {
				this.carNo = value;
				this.mescroll.triggerDownScroll();
			}, //搜索
			searchChange2() {
				this.checkedCarId = null;
				this.mescroll.triggerDownScroll();
			},
			checkedCar(id) {
				this.checkedCarId = id;
			},
			//排车点击事件
			distribution(item) {
				this.carId = item.carId;
				if (item.carSource == 6) { //托管车辆->弹框提示可设置托管单价
					this.show = true
					this.carId = item.carId;
				} else { //自营车辆
					this.confimDispatchCar();
				}
			},
			// 确认排车
			confimDispatchCar() {
				uni.showLoading({
					title: '正在排车...',
					mask: true
				});
				api.supplyCar({
					orderNo: this.order.orderNo,
					carId: this.carId,
					escrowUnitPrice:this.escrowUnitPrice
				}).then(res => {
					uni.hideLoading();
					this.$u.toast('排车成功');
					uni.$emit('refreshOrder');
					uni.navigateBack({
						animationDuration: 300
					});
				});
			},
			//添加同行车辆
			addPeerCar() {
				uni.navigateTo({
					url: './addPeerCar?orderInfo=' + encodeURIComponent(JSON.stringify(this.order))
				});
			},
			goOrderDetail(orderNo) {
				let item = {
					orderNo: orderNo,
				};
				uni.navigateTo({
					url: './orderDetail?item=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			check(e) {
				//正则表达试
				e = e.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				this.$nextTick(() => {
					this.escrowUnitPrice = e;
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.searchBox {
		margin: 0 24rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-top: 1rpx solid #f5f5f5;

		.city {
			font-size: 28rpx;
			color: #666;
		}

		.search {
			flex: 1;
			padding: 0 20rpx;
			margin: 0 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			height: 60rpx;
			background: #ffffff;
			border-radius: 30rpx;
			border: 1rpx solid #e0e0e0;
		}

		.text-line {
			color: #333;
			font-size: 28rpx;
			padding: 10rpx 0;
		}
	}

	.tuijian {
		color: #13ce66;
	}

	.order {
		color: #1573ff;
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding: 20rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: yellow;
	}

	.flex-item {
		flex: 1;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}

	.end-time {
		color: #f59a23;

		.type-tag {
			background-color: #f59a23;
			color: white;
			padding: 5rpx;
			font-size: 18rpx;
			margin-right: 10rpx;
		}
	}

	.start-time {
		color: #e65a6b;

		.type-tag {
			background-color: #e65a6b;
			color: white;
			padding: 5rpx;
			font-size: 18rpx;
			margin-right: 10rpx;
		}
	}

	/deep/ .u-radio-group--row {
		display: inline !important;
	}

	/deep/ .u-radio {
		flex-direction: row-reverse !important;
	}

	.sucess-text {
		color: #13ce66;
		font-size: 12px;
	}

	.warning-text {
		color: #ffba00;
		font-size: 12px;
	}

	.danger-text {
		color: #ff4949;
	}

	.item-title {
		font-size: 28rpx;
		color: #333;
	}

	.orderInfo {
		margin: 20rpx;
		margin-bottom: 0;
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 24rpx;
		box-sizing: border-box;

		.text-line {
			color: #333;
			font-size: 28rpx;
			padding: 10rpx 0;
		}
	}

	.bottomBtn {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		height: 100rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		.btn {
			width: 45%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: #fff;
			background-color: #1573ff;
			border-radius: 50rpx;
			font-size: 28rpx;
		}
	}
</style>